<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <#include "/pubHeadStyle.html">
</head>
<body>
<form class="layui-form" lay-filter="formData" id="formData">
    <div class="layui-btn-container" style="position: absolute;bottom: 0;left:43%">
        <button type="button" class="layui-btn" lay-submit="" lay-filter="filterScript" id="determine">确定</button>
        <a class="layui-btn layui-btn-danger" id="cancel">取消</a>
    </div>
    <div class="dataSourceAdd">
        <table class="table-detail">
            <tr>
                <th style="position: relative;"><i class="layui-icon layui-icon-help" style="color:blue;"></i>
                    <div class="assist">该脚本为SQL 脚本,为where后的脚本,例:1.BPM_BUS_LINK.BUS_CREATOR_ID=:[CUR_USER] 2.table.field  like '%value%'</div>
                </th>
                <th>字段:</th>
                <td>
                    <select name="tableField" id="tableField" lay-filter="tableField">
                    <option value="">请选择</option>
                    </select>
                </td>
                <th>常用字段:</th>
                <td>
                    <select name="commonField" id="commonField" lay-filter="commonField">
                    <option value="">请选择</option>
                    </select>
                </td>
            </tr>
        </table>
        <div class="layui-form-item">
        <div class="layui-inline" style="margin-bottom:0;">
        <label class="layui-form-label" style="width: 88px;">使用的表: </label>
        <div style="margin-left:131px;" id="usedTable"></div>
        </div>
        </div>
    </div>

        <div class="layui-field-box">
            <textarea id="textarea" cols="100%" rows="10"></textarea>
        </div>
</form>
<script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
<script>
    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'form', 'jquery', 'layer', 'setter','commons'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var setter = layui.setter;
        var $ = layui.$;
        var commons = layui.commons;
        var tableId = '${tableId}';
        var add = '${add}';
        var id = '${id}';
        $(".layui-icon-help").mouseover(function(){
            $(".assist").show();
        });
        $(".layui-icon-help").mouseout(function(){
            $(".assist").hide();
        });
        //数据回显
        $.ajax({
            url: serverPath.formPath + setter.formLinkPath +"formDef/filter",
            dataType: 'json',
            type: "post",
            data: {"tableId": tableId},
            success: function (result) {
                if(commons._filterRecord(result)){
                    var bpmFormTable = result.data.bpmFormTable;
                    //常用字段
                    var commonField="";
                    for(var i = 0; i < result.data.commonVars.length; i++){
                        commonField = commonField +'<option value="'+result.data.commonVars[i]['alias']+'">'+result.data.commonVars[i]['name']+'</option>\n'
                    }
                    $("#commonField").append(commonField);
                    //表字段
                    var tableField = '<optgroup label="'+bpmFormTable.tableDesc+'">';
                    for(var i = 0; i < bpmFormTable.fieldList.length; i++){
                        tableField = tableField + '<option value="'+bpmFormTable.tableName+'.'+bpmFormTable.fieldList[i]['fieldName']+'">'+bpmFormTable.fieldList[i]['fieldDesc']+'</option>\n'
                    }
                    tableField = tableField + '</optgroup>';

                    for(var i = 0; i < bpmFormTable.subTableList.length; i++){
                        tableField = tableField + '<optgroup label="'+bpmFormTable.subTableList[i].tableDesc+'">';
                        for(var j = 0; j < bpmFormTable.subTableList[i].fieldList.length; j++){
                            tableField = tableField + '<option value="'+bpmFormTable.subTableList[i].tableName+'.'+bpmFormTable.subTableList[i].fieldList[j]['fieldName']+'">'+bpmFormTable.subTableList[i].fieldList[j]['fieldDesc']+'</option>\n'
                        }
                        tableField = tableField + '</optgroup>';
                    }
                    for(var i = 0; i < bpmFormTable.otherTableList.length; i++){
                        tableField = tableField + '<optgroup label="'+bpmFormTable.otherTableList[i].tableDesc+'">';
                        for(var j = 0; j < bpmFormTable.otherTableList[i].fieldList.length; j++){
                            tableField = tableField +'<option value="'+bpmFormTable.otherTableList[i].tableName+'.'+bpmFormTable.otherTableList[i].fieldList[j]['fieldName']+'">'+bpmFormTable.otherTableList[i].fieldList[j]['fieldDesc']+'</option>\n'
                        }
                        tableField = tableField + '</optgroup>';
                    }
                    $("#tableField").append(tableField);

                    //使用的表
                    var usedTable = '<input type="checkbox" name="tableName" mainTable="'+bpmFormTable.tableName+'" relation="'+bpmFormTable.relation+'"  source="1" value="'+bpmFormTable.tableName+'" lay-skin="primary" title="'+bpmFormTable.tableDesc+'">';
                    for(var i = 0; i < bpmFormTable.subTableList.length; i++){
                        usedTable = usedTable + '<input type="checkbox" name="tableName" mainTable="'+bpmFormTable.tableName+'" relation="'+bpmFormTable.subTableList[i].relation+'" source="1" value="'+bpmFormTable.subTableList[i].tableName+'" lay-skin="primary" title="'+bpmFormTable.subTableList[i].tableDesc+'">'
                    }
                    for(var i = 0; i < bpmFormTable.otherTableList.length; i++){
                        usedTable = usedTable + '<input type="checkbox" name="tableName" mainTable="'+bpmFormTable.tableName+'" relation="'+bpmFormTable.otherTableList[i].relation+'" source="2" value="'+bpmFormTable.otherTableList[i].tableName+'" lay-skin="primary" title="'+bpmFormTable.otherTableList[i].tableDesc+'">'
                    }
                    $("#usedTable").append(usedTable);
                    form.render('select');
                    form.render('checkbox');
                    //父页面 选择按钮 数据回显
                    if(add==='0'){
                        var res = parent.window.getTextAreaValue(id);
                        res = JSON.parse(res);
                        $("#textarea").val(res.script);
                        for(var i = 0;i < res.tables.length; i++){
                            $("input[value='"+res.tables[i].table+"']").prop("checked",true);
                        }
                        form.render('checkbox');
                    }
                }
            }
        });
        //监听select下拉选
        form.on('select(tableField)', function(data){
            //将数据插入到光标处
            $("#textarea").insertAtCaret(data.value);
            $("#textarea").focus();
            $("#tableField").val("");
            form.render('select');
        });
        form.on('select(commonField)', function(data){
            //将数据插入到光标处
            $("#textarea").insertAtCaret(":"+data.value);
            $("#textarea").focus();
            $("#commonField").val("");
            form.render('select');
        });

        form.on('submit(filterScript)', function (data) {
            var tables = [];
            $("input[name='tableName']:checked").each(function(i){
                var table = $(this).val();
                var source = $(this).attr("source");
                var mainTable = $(this).attr("mainTable");
                var relation = $(this).attr("relation");
                var tableJson = {"table":table,"source":source,"mainTable":mainTable,"relation":relation};
                tables.push(tableJson);
            });
            var script = $("#textarea").val();
            var conDesc = "脚本";
            var ruleType = "2";
            var scriptJson = {"script":script,"tables":tables,"conDesc":conDesc,"ruleType":ruleType};
            if(add==='1'){
                //添加
                parent.window.addScriptJson(scriptJson,guid2());
            }else{
                //修改  获取父页面的元素
                parent.window.editScriptJson(scriptJson,id);
            }
            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭窗口
        });

        $("#cancel").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
    });
    //前台uuid
    function guid2() {
        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    }
    //在光标处插入数据
    $.fn.extend({
        insertAtCaret: function (myValue) {
            var $t = $(this)[0];
            if (document.selection) {
                this.focus();
                sel = document.selection.createRange();
                sel.text = myValue;
                this.focus();
            } else
            if ($t.selectionStart || $t.selectionStart == '0')
            {
                var startPos = $t.selectionStart;
                var endPos = $t.selectionEnd;
                var scrollTop = $t.scrollTop;
                $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos,$t.value.length);
                this.focus();
                $t.selectionStart = startPos + myValue.length;
                $t.selectionEnd = startPos + myValue.length;
                $t.scrollTop = scrollTop;
            } else {
                this.value += myValue;
                this.focus();
            }
        }
    })
</script>
<style>
    .assist{
        position: absolute;
        top: 38px;
        z-index: 999;
        padding: 11px;
        background: #FFFFA3;
        left:30px;
        display: none;
        text-align: left;
    }
</style>
</body>
</html>